<template>
     <!-- Echarts容器 -->
    <div class="charts" ref="myecharpay">

    </div>
</template>

<script>
import * as  echarts from 'echarts'

export default {
    name:'barChart',
    methods:{
        getEchart(){
             const myChartPay = echarts.init(this.$refs.myecharpay) 
             let  option = {
                grid:{ 
                        left: 0,
                        right: 0,
                        top:0,
                        bottom:0
                    },
                    //提示组件
                tooltip: {},
                xAxis: {
                    // 隐藏x轴
                     show: false,
                     type: 'category',
                 },
                yAxis: {
                    //隐藏y轴 
                     show: false,
                     type: 'value'
                 },
                //  设置数据集
                dataset:{
                    source:[
                          ['月份','2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07','2022-08', '2022-09', '2022-10', '2022-11', '2022-12'],
                          ['支付笔数',2000, 1124, 589, 1655, 1111, 1990, 1088,1022, 1344, 1889, 2655, 2411]
                    ]
                },
                  // 系列的设置：绘制什么类型的图表、数据的展示在这里设置
                 series: [
                     {
                         type: 'bar',
                         seriesLayoutBy: 'row',
                     }
                 ]
             };
             myChartPay.setOption(option)
             window.addEventListener("resize", () => {//监听浏览器窗口大小
                if(myChartPay){
                    myChartPay.resize();
                }
            });
        }
    },
    mounted(){
        this.getEchart()
    }
}
</script>

<style scoped>
     .charts{
        width: 100%;
        height: 90%;
    }
</style>